<template>
	<QForm ref="formRef"
		   :label-position="FormValue.formPos"
		   :gutter="10" :col="6"
		   :model="FormValue"
		   :form-options="formOptions"
		   :size="FormValue.formSize"
		   :label-width="FormValue.labelWidth"
		>

			<el-button type="primary"  icon="el-icon-search"	@click="onSearch" >查询</el-button>
			<el-button type="primary" plain >重置</el-button>
			<el-button
				type="text"
				@click="toggleCollapse"
			>
				{{ !isCollapsed ? '展开' : '折叠' }}
				<el-icon>
					<ArrowDown v-if="!isCollapsed" />
					<ArrowUp v-else />
				</el-icon>
			</el-button>
	</QForm>

</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

import { QForm, type FormItemRows } from "@meetjs/element-plus-kit";
import formItems from './json/search.js';
import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";

const formRef = ref<any>(null);
const FormValue = ref({
	formPos: 'right',
	formItemPos: 'right',
	formSize: 'default',
	labelWidth: 100,
	isShow: false
});
const formOptions = reactive<FormItemRows[]>(formItems);
const emit = defineEmits(['onSearch']);

const onSearch = () => {
	console.log("on")
	emit('onSearch', {id:1});
};

// 折叠状态
const isCollapsed = ref(false)

// 切换折叠状态
const toggleCollapse = () => {
	if(isCollapsed.value){
		FormValue.value.isShow = false;
	}else{
		FormValue.value.isShow = true;
	}
	isCollapsed.value = FormValue.value.isShow
}

// 折叠状态


</script>
<style lang="scss" scoped>

</style>
